<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
  <title>系统登录</title>
  <link rel="stylesheet" href="css/login.css">
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script src="./lib/layui/layui.js" charset="utf-8"></script>
</head>
<body class="login-bg">
<div id="app">
    <div class="login">
        <div class="message">小区管理系统登录</div>
        <div class="layui-form login-form">
            <form class="layui-form" action="">
                <div class="layui-form-item logo-title">
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-username" ></label>
                    <input type="text" name="login_name" lay-verify="required|account" placeholder="用户名" v-model="loginUser.loginName"
                           autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-item">
                    <label class="layui-icon layui-icon-password" ></label>
                    <input type="password" name="password" lay-verify="required|password" placeholder="密码" v-model="loginUser.password"
                           autocomplete="off" class="layui-input" >
                </div>
                <div class="layui-form-item" style="font-size: 18px;">
                    <button class="layui-btn layui-btn-fluid" lay-submit="" style="width: 100%;height: 50px" @click="login()"  lay-filter="login">登  录</button>
                    <hr class="hr20" >
                </div>
            </form>
        </div>
    </div>
    </div>
</div>
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script src="js/x-layui.js" charset="utf-8"></script>
    <!--导入Vue依赖包-->
    <script src="/js/vue.js" charset="utf-8"></script>
    <!-- 引入Element组件库 -->
    <script src="/js/index.js"></script>
    <!--导入Axios依赖包-->
    <script src="/js/axios.js" charset="utf-8"></script>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                title:"用户登陆",
                loginUser:{
                    id: "1",
                    loginName: "test",
                    password: "test",
                }
            },
            methods:{
                login(){
                    console.log("开始登录");
                    axios.post("/login/index/",this.loginUser).then((res)=>{
                        if(res.data.flag){
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            });
                            alert("登陆成功");
                            window.location.href='http://localhost:8083/index.html';
                        } else {
                            alert("登陆失败");
                        }
                    });
                }
            }
        });
    </script>
</body>
</html>